<template>
  <div class="questionsContend">
    <div class="container">
      <section class="chooseCarType">
        <div class="topTitleTab">
          <span>当前位置：首页 > 模拟考试 > {{ subText }} > {{ type }}</span>
        </div>
      </section>
      <!-- 做题 -->
      <section class="question" v-if="currentQuestion">
        <div class="question_left">
          <div class="question_title">
            <span class="slotIndex"
              >{{ currentIndex }}/{{ serialList.length }}</span
            >
            <span class="question_title">{{ currentQuestion.content }}</span>
            <div class="btn collect curp">
              <img src="~/assets/images/collection.png" alt="" />
              <span>收藏</span>
            </div>
          </div>
          <div class="options">
            <div
              :class="[
                optionItem.rightNor ? ' rightNor' : '',
                optionItem.right ? ' right' : '',
                optionItem.error ? ' error' : '',
                'optionItem curp',
              ]"
              v-for="(optionItem, i) in currentQuestion.option"
              :key="i"
              @click="chooseOptions(currentQuestion, i, optionItem.value)"
            >
              <span class="curp">{{ optionItem.title }}</span>
            </div>
            <span
              class="dxbtn"
              v-if="currentQuestion.type == 2"
              @click="setUserAnswer()"
              >确定</span
            >
            <span class="tips" v-if="currentQuestion.type == 0"
              >判断题，请选择您认为的正确答案</span
            >
            <span class="tips" v-if="currentQuestion.type == 1"
              >单选题，请选择您认为的正确答案</span
            >
            <span class="tips" v-if="currentQuestion.type == 2"
              >多选题，请选择至少两个答案</span
            >
          </div>
        </div>

        <div class="question_right">
          <div class="question_right_top">
            <div class="topImg">
              <el-image
                v-if="
                  currentQuestion.head_type == 'image' &&
                  currentQuestion.head_img != ''
                "
                style="width: 100%; height: 100%"
                :src="currentQuestion.head_img"
                fit="contain"
                :preview-src-list="[currentQuestion.head_img]"
              >
              </el-image>
              <VueVideo
                :aspectRatio="'274:154'"
                :loop="true"
                :autoplay="true"
                :controls="false"
                :VideoSrc="currentQuestion.head_img"
                v-if="
                  currentQuestion.head_type == 'video' &&
                  currentQuestion.head_img != ''
                "
              ></VueVideo>
            </div>
            <span
              class="tips"
              v-if="
                currentQuestion.head_type == 'image' &&
                currentQuestion.head_img != ''
              "
              >点击图片查看大图</span
            >
          </div>
        </div>
      </section>
      <section>
        <div class="optionsBtn">
          <div class="left">
            <span @click="backQuestion">上一题</span>
            <span @click="nextQuestion">下一题</span>
          </div>
          <div class="botBtn">
            <span class="btn curp" @click="goshowDetails">{{
              showDetails ? "收起详解" : "显示详解"
            }}</span>
            <span class="btn curp" @click="goshowserial">{{
              showserial ? "收起答题卡" : "显示答题卡"
            }}</span>
          </div>
        </div>
      </section>
      <!-- 正确错误提示 -->
      <section class="questionTips">
        <div class="autochange">
          <el-checkbox v-model="autochangeNext">答对自动下一题</el-checkbox>
        </div>
        <div class="right">
          <span>答对：</span>
          <span class="addColor">{{ rightNum }}题</span>
        </div>
        <div class="err">
          <span>答错：</span>
          <span class="addColor">{{ errorNum }}题</span>
        </div>
        <div class="accuracy">
          <span>正确率：</span>
          <span class="addColor">{{ rate }}%</span>
        </div>
      </section>
      <!-- 题序 -->
      <section class="preface" v-if="showserial">
        <div
          :class="[
            item.index == currentIndex
              ? 'prefaceItem curp active'
              : 'prefaceItem curp',
            item.right ? 'right' : '',
            item.error ? ' error' : '',
          ]"
          v-for="(item, i) in serialList"
          @click="choosequestion(item)"
        >
          <span>{{ item.index }}</span>
        </div>
      </section>
      <!-- 解析 -->
      <section class="analysis" v-if="showDetails">
        <span class="analysis_title">答题解析</span>
        <!-- <div class="level">
          <span>难度等级</span>
          <div class="starBox">
            <img
              src="~/assets/images/rankstar.png"
              alt=""
              v-for="num in 5"
              :key="num"
            />
          </div>
        </div> -->
        <div class="analysisDetails">
          <span>{{ currentQuestion.comments }}</span>
        </div>
      </section>
      <!-- 技巧 -->
      <section class="analysis" v-if="showDetails">
        <span class="analysis_title">答题技巧</span>
        <div class="analysisDetails">
          <span>{{ currentQuestion.skill }}</span>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import VueVideo from "@/components/VueVideo.vue";
import { questionSerial, question } from "~/api/question";
export default {
  components: { VueVideo },
  data() {
    return {
      autochangeNext: true,
      showDetails: false,
      flag: true,
      showserial: false,
      currentIndex: 1,
      userAnswer: null,
      optionsdx: [], //多选数组
      rightNum: 0, //答对
      errorNum: 0, //答对
      rate: 0, //正确率
    };
  },

  async asyncData({ app, query, params }) {
    let {
      sub,
      type,
      category,
      random,
      column,
      columnId,
      chapter,
      categorysub,
      difficulty,
      group
    } = query;
    type=decodeURIComponent(type)
    let subText;
    if (category == 5) {
      sub = 1;
      if (sub == 1) {
        subText = "客运资格证";
      } else if (sub == 2) {
        subText = "货运资格证";
      } else if (sub == 3) {
        subText = "危险品格证";
      } else if (sub == 4) {
        subText = "教练员格证";
      } else if (sub == 5) {
        subText = "出租车资格证";
      }
    } else {
      subText = sub == 1 ? "科目一" : "科目四";
    }
    let axioxsParams = { course: sub,group:group,  category: category };
    if (random) {
      axioxsParams.random = random;
    }
    if (column) {
      axioxsParams[column] = columnId;
    }
    if (chapter) {
      axioxsParams.chapter = chapter;
    }

    if (difficulty) {
      axioxsParams.difficulty = difficulty;
    }
    let data = await questionSerial(axioxsParams);
    let questionList=[], acserialList=[], serialList=[];
    if (data.length > 0) {
      acserialList = data.slice(0, 20);
      serialList = [];
      data.forEach((p, i) => {
        serialList.push({ id: p, index: i + 1 });
      });

      questionList = await question({
        id: acserialList,
        course: sub,
        category: category,
        group:group, 
      });

      questionList.forEach((p) => {
        serialList.forEach((s) => {
          if (p.id == s.id) s = Object.assign(s, p);
        });
      });
    }
    //初始题序

    return {
      subText: subText,
      sub: sub,
      group: group,
      type: type,
      category: category,
      serialList: serialList,
      questionList: questionList,
      currentQuestion: serialList[0],
    };
  },
  watch: {
    rightNum: function (val) {
      this.rate = (val / (val + this.errorNum)).toFixed(2) * 100;
    },
    errorNum: function (val) {
      this.rate = (this.rightNum / (val + this.rightNum)).toFixed(2) * 100;
    },

  },
  methods: {
    //请求题
    async getquestionList(arr) {
      var that = this;
      let acserialList = arr;
      if (!this.flag) {
        return;
      }
      this.flag = false;
      let questionList = await question({
        id: acserialList,
        course: this.sub,
        category: this.category,
        group:this.group, 
      });
      this.flag = true;
      questionList.forEach((p) => {
        that.serialList.forEach((s) => {
          if (p.id == s.id && !s.content) s = Object.assign(s, p);
        });
      });
    },
    //显示详解
    goshowDetails() {
      this.showDetails = !this.showDetails;
    },
    //显示答题卡
    goshowserial() {
      this.showserial = !this.showserial;
    },
    //答题
    chooseOptions(val, i, userAnswer) {
      var that = this;
      if (val.userAnswer) {
        return;
      }
      let currentQuestion = JSON.parse(JSON.stringify(val));
      if (currentQuestion.type == 0 || currentQuestion.type == 1) {
        //判断 、单选
        currentQuestion.userAnswer = userAnswer;
        if (userAnswer == currentQuestion.answer) {
          // 回答正确
          that.rightNum += 1;
          currentQuestion.option[i].right = true;
          that.serialList.forEach((s) => {
            if (s.id == currentQuestion.id) s.right = true;
          });
          if (that.autochangeNext) {
            setTimeout(function () {
              that.nextQuestion();
            }, 500);
          }
        } else {
          // 回答错误
          that.errorNum += 1;
          currentQuestion.option[i].error = true;
          currentQuestion.option.forEach((p) => {
            if (p.value == currentQuestion.answer) p.right = true;
          });
          that.serialList.forEach((s) => {
            if (s.id == currentQuestion.id) s.error = true;
          });
        }
        that.currentQuestion = currentQuestion;
        that.serialList.forEach((p) => {
          if (p.id == currentQuestion.id) p = Object.assign(p, currentQuestion);
        });
      } else if (currentQuestion.type == 2) {
        //多选
        let userAnswer = [];
        currentQuestion.option[i].right = currentQuestion.option[i].right
          ? !currentQuestion.option[i].right
          : true;
        currentQuestion.option.forEach((p) => {
          if (p.right) userAnswer.push(p.value);
        });
        this.userAnswer = userAnswer;
        that.currentQuestion = currentQuestion;
      }
    },
    //多选确定
    setUserAnswer() {
      let that = this;
      let currentQuestion = JSON.parse(JSON.stringify(that.currentQuestion));
      currentQuestion.userAnswer = that.userAnswer.join(",");
      if (currentQuestion.userAnswer == currentQuestion.answer) {
        that.rightNum += 1;
        that.serialList.forEach((s) => {
          if (s.id == currentQuestion.id) s.right = true;
        });
        if (that.autochangeNext) {
          setTimeout(function () {
            that.nextQuestion();
          }, 500);
        }
      } else {
        that.errorNum += 1;
        let answer = currentQuestion.answer.split(","); //[a,b,c,d] [a,b]
        currentQuestion.option.forEach((p) => {
          if (
            answer.indexOf(p.value) != -1 &&
            that.userAnswer.indexOf(p.value) == -1
          ) {
            p.rightNor = true;
          }
          if (that.userAnswer.indexOf(p.value) != -1) {
            if (answer.indexOf(p.value) != -1) {
              p.right = true;
            } else {
              p.error = true;
            }
          }
        });
        that.currentQuestion = currentQuestion;
        that.serialList.forEach((s) => {
          if (s.id == currentQuestion.id) s.error = true;
        });
        that.serialList.forEach((p) => {
          if (p.id == currentQuestion.id) p = Object.assign(p, currentQuestion);
        });
      }
    },
    //选择题序
    choosequestion(item) {
      if (!item.content) {
        let acserialList = [];
        let question = this.serialList.slice(
          item.index - 10,
          item.index - 1 + 10
        );
        question.forEach((p) => {
          acserialList.push(p.id);
        });
        this.getquestionList(acserialList).then(() => {
          this.currentQuestion = this.serialList[item.index - 1];
          this.currentIndex = item.index;
        });
      } else {
        // if(!this.serialList[this.index + 4].content)
        this.currentQuestion = this.serialList[item.index - 1];
        this.currentIndex = item.index;
      }
    },
    // 上一题
    backQuestion() {
      if (this.currentIndex == 1) {
        alert("已经是第一题了");
        return;
      }
      if (
        this.serialList[this.currentIndex - 5] &&
        !this.serialList[this.currentIndex - 5].content
      ) {
        let acserialList = [];
        let question = this.serialList.slice(
          this.currentIndex - 25,
          this.currentIndex - 1
        );
        question.forEach((p) => {
          acserialList.push(p.id);
        });

        this.getquestionList(acserialList);
      }
      this.currentIndex -= 1;
      this.currentQuestion = this.serialList[this.currentIndex - 1];
    },
    // 下一题
    nextQuestion() {
      if (this.currentIndex == this.serialList.length) {
        alert("已经是最后一题了");
        return;
      }
      if (
        this.serialList[this.currentIndex + 5] &&
        !this.serialList[this.currentIndex + 5].content
      ) {
        let acserialList = [];
        let question = this.serialList.slice(
          this.currentIndex + 5,
          this.currentIndex + 25
        );
        question.forEach((p) => {
          acserialList.push(p.id);
        });

        this.getquestionList(acserialList);
      }
      this.currentIndex += 1;
      this.currentQuestion = this.serialList[this.currentIndex - 1];
    },
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/questions.scss";
::v-deep {
  .el-checkbox__label {
    font-size: 16px;
  }
}
.vjs-custom-skin > .video-js .vjs-big-play-button {
  display: none !important;
}
</style>